<div class="item-container" admin-item-data>
	<div class="am-cf am-padding">
	      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">Item</strong> / <small>Data</small></div>
	    </div>

	    <div class="am-g">
	      <div class="am-u-sm-12 am-u-md-6">
	        <div class="am-btn-toolbar">
	          <div class="am-btn-group am-btn-group-xs">
	            <button type="button" class="am-btn am-btn-default" data-am-modal="{target: '#add-item-modal', closeViaDimmer: 0}"><span class="am-icon-plus"></span> Add</button>
	            <button type="button" class="am-btn am-btn-default" admin-edit-item><span class="am-icon-edit"></span> Edit</button>
	            <button type="button" class="am-btn am-btn-default" admin-delete-item><span class="am-icon-trash-o"></span> Delete</button>
	          </div>
	        </div>
	      </div>
	      <div class="am-u-sm-6 am-u-md-2">
	        <div class="am-form-group item-page-list">
	          <select data-am-selected="{btnSize: 'sm'}" >
	            <option value="10">10</option>
	            <option value="20">20</option>
	            <option value="50">50</option>
	            <option value="All">All</option>
	          </select>
	        </div>
	      </div>
	      <div class="am-u-sm-12 am-u-md-3">
	        <div class="am-input-group am-input-group-sm item-filter">
	          <input type="text" class="am-form-field search-item" ng-model="search" ng-keyup="searchItems($event)">
	          <span class="am-input-group-btn">
	            <button class="am-btn am-btn-default" type="button">Search</button>
	          </span>
	        </div>
	      </div>
	    </div>

	    <div class="am-g">
	      <div class="am-u-sm-12">
	          <table class="am-table am-table-striped am-table-hover" id="item-table">
	            <thead>
	              <tr>
	                <th class="table-check"><input type="checkbox" class="select-all-item"/></th>
	                <th class="table-id">ID</th>
	                <th class="table-name">Name</th>
	                <th class="table-description">Description</th>
	                <th class="table-buyPrice">Buy Price</th>
	                <th class="table-sellPrice">Sell Price</th>
	                <th class="table-locked">Locked</th>
	                <th class="table-icon">Icon</th>
	                <th class="table-set">Operation</th>
	              </tr>
	          </thead>
	          <tbody>
	            <tr ng-repeat="item in items.result">
	              <td class="select-column"><input type="checkbox" name="select-single-item" class="select-single-record" /></td>
	              <td class="itemId">{{item.itemId}}</td>
	              <td class="itemName am-text">{{item.name}}</td>
	              <td class="itemDescription am-text">{{item.description}}</td>
	              <td class="itemBuyPrice am-text">{{item.buyPrice}}</td>
	              <td class="itemSellPrice am-text">{{item.sellPrice}}</td>
	              <td class="itemLocked am-text">
	             	<div class="am-btn-toolbar">
	                  <div class="am-btn-group am-btn-group-xs">
	              		<button type="button" data-oper="status" data-id="{{item.itemId}}" class="am-btn item-operate" ng-class="item.locked == 0 ? 'am-btn-danger' : 'am-btn-success'" ng-bind="item.locked == 0 ? 'Locked' : 'Unlock'"></button>
	              	  </div>
	                </div>	
	              </td>
	              <td class="itemIcon am-text"><img class="item-icon" ng-src="{{item.icon}}" /></td>
	              <td>
	                <div class="am-btn-toolbar">
	                  <div class="am-btn-group am-btn-group-xs">
	                    <button data-itemId="{{item.itemId}}" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#quests-modal', width: 600, height: 700}" admin-mission-quests><span class="am-icon-pencil-square-o"></span> View Quests</button>
	                  </div>
	                </div>
	              </td>
	            </tr> 
	           
	          </tbody>
	        </table>
	          <div class="am-cf">
	          	Total <span class="item-total-record">0</span> records
			  <div class="am-fr">
			    <ul class="am-pagination item-pager-container">
			    </ul>
			  </div>
		    </div>
		 <hr />
	     <p>Attention</p>
	   </div>
	</div>
</div>

<!--    add item modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="add-item-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Add Item
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd ">
       <form class="am-form" id="add-item-form" data-am-validator>
		  <fieldset>
			<div class="am-form-group">
		      <label for="itemId">Item Id：</label>
		      <input type="text" name="itemId" id="itemId" minlength="1" placeholder="Id" ng-model="item.itemId" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="itemName">Item Name：</label>
		      <input type="text" name="itemName" id="itemName" minlength="3" placeholder="Name" ng-model="item.name" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="description">Item Description: </label>
		      <input type="text" name="description" id="description" minlength="3" placeholder="Description" ng-model="item.description" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="buyPrice">Buy Price：</label>
		      <input type="number" name="buyPrice" id="buyPrice" placeholder="Buy Price" ng-model="item.buyPrice" value="1" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="sellPrice">Sell Price：</label>
		      <input type="number" name="sellPrice" id="sellPrice" placeholder="Sell Price" ng-model="item.sellPrice" value="1" required/>
		    </div>

		    <div class="am-form-file">
		      <div class="show-item-icon">
		      	<img class="item-icon" ng-show="itemIcon[0].dataUrl != null" ng-src="{{itemIcon[0].dataUrl || ''}}" class="thumb" />
		      </div>
			  <button type="button" class="am-btn am-btn-danger am-btn-sm">
			    <i class="am-icon-cloud-upload"></i> Select Item Icon</button>
			  <input id="itemIcon" type="file" ng-file-select="" ng-model="itemIcon" ng-change="generateThumb(itemIcon[0], $files)" />
			  <input type="hidden" ng-model="item.icon" />
			</div>

		    <button class="am-btn am-btn-secondary" data-oper="add" data-id="0" admin-operate-item>Add</button>
		  </fieldset>
		</form>
    </div>
  </div>
</div>

<!--    edit item modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="edit-item-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Edit Item
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
       <form class="am-form" id="edit-item-form" data-am-validator>
		  <fieldset>
			<div class="am-form-group">
		      <label for="itemId">Item Id：</label>
		      <input type="text" name="itemId" id="itemId" minlength="1" placeholder="Id" ng-model="item.itemId" value="{{item.itemId}}" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="itemName">Item Name：</label>
		      <input type="text" name="itemName" id="itemName" minlength="3" placeholder="Name" ng-model="item.name" value="{{item.name}}" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="description">Item Description: </label>
		      <input type="text" name="description" id="description" minlength="3" placeholder="Description" ng-model="item.description" value="{{item.description}}" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="buyPrice">Buy Price：</label>
		      <input type="number" name="buyPrice" id="buyPrice" placeholder="Buy Price" ng-model="item.buyPrice" value="{{item.buyPrice}}" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="sellPrice">Sell Price：</label>
		      <input type="number" name="sellPrice" id="sellPrice" placeholder="Sell Price" ng-model="item.sellPrice" value="{{item.sellPrice}}" required/>
		    </div>

		    <button class="am-btn am-btn-secondary" data-oper="edit" data-id="0" admin-operate-item>Update</button>
		  </fieldset>
		</form>
    </div>
  </div>
</div>

<!--    delete item modal   -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="delete-item-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Delete Confirm</div>
    <div class="am-modal-bd">
      Are you sure to delete the record?
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>Cancel</span>
      <span class="am-modal-btn delete-item-btn" data-oper="del" data-am-modal-confirm admin-operate-item>Delete</span>
    </div>
  </div>
</div>

<!--    validate item modal   -->
<div class="am-modal am-modal-alert" tabindex="-1" id="item-warning">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Warning</div>
    <div class="am-modal-bd">
      Please select a item to operate.
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">Close</span>
    </div>
  </div>
</div>

